<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :border="false">
      <a-form-model
        ref="ruleForm"
        :model="settingForm"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
        :rules="rules"
      >
        <div class="title">基础设置</div>

        <a-form-model-item label="出局股东冻结佣金比例" ref="name" prop="shareHolderProfit">
          <a-input
            style="width: 200px"
            type="number"
            class="input-class"
            v-model="settingForm.shareHolderProfit"
            addonAfter="%"
          />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：默认比例为0%</span>
        </a-form-model-item>
        <a-form-model-item label="冻结股东佣金（等级）" ref="name" prop="shareHolderLevel">
          <a-select v-model="settingForm.shareHolderLevel" style="width: 120px">
            <a-select-option :value="0"> 所有等级 </a-select-option>
            <a-select-option :value="item.id" v-for="(item, i) of shareHolderLevel" :key="i">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="冻结团队范围（层数）"
          ref="name"
          prop="shareHolderNumber"
          v-show="settingForm.shareHolderLevel > 0"
        >
          <a-input-number
            style="width: 200px"
            :min="1"
            :step="1"
            type="number"
            class="input-class"
            v-model="settingForm.shareHolderNumber[0]"
          />
          <a-input-number
            style="width: 200px; margin-left: 10px"
            :step="1"
            :min="parseInt(settingForm.shareHolderNumber[0]) + 1"
            type="number"
            class="input-class"
            v-model="settingForm.shareHolderNumber[1]"
          />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：最小为1，包含自己</span>
        </a-form-model-item>
        <a-form-model-item label="递归分红停止基数" ref="name" prop="shareHolderPriceMin">
          <a-input
            style="width: 200px"
            type="number"
            class="input-class"
            v-model="settingForm.shareHolderPriceMin"
            addonAfter="元"
          />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：分红金额小于此即停止递归分红</span>
        </a-form-model-item>
        <a-form-model-item label="是否开启小推大佣金限制" ref="name" prop="shareHolderProfitSwitch">
<!--          <a-switch v-model='switchFilter'  @change='profitSwitchChange'/>-->
          <a-radio-group name="radioGroup" v-model='settingForm.shareHolderProfitSwitch'>
            <a-radio :value="0">
              关闭
            </a-radio>
            <a-radio :value="1">
              开启
            </a-radio>
          </a-radio-group>
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：开启后客户购买小产品升级代理商后，再推荐大产品的下级也只能拿小产品的佣金</span>
        </a-form-model-item>
        <a-form-model-item label="是否开启小推大佣金限制" ref="name" prop="shareHolderProfitSwitch" v-if='settingForm.shareHolderProfitSwitch'>
<!--          <a-switch v-model='switchFilter'  @change='profitSwitchChange'/>-->
<!--          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：开启后客户购买小产品升级代理商后，再推荐大产品的下级也只能拿小产品的佣金</span>-->
          <a-input
            style="width: 200px"
            type="number"
            class="input-class"
            v-model="settingForm.shareHolderHighProfit"
            addonAfter="%"
          />
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：当购买低价格产品成为代理后，再推荐高价格代理时，代理可以获取到高价格产品佣金*佣金折扣比例作为分红基数</span>
        </a-form-model-item>

<!--        <div class="title">提现设置</div>-->
<!--        <a-form-model-item label="股东提现手续费佣金比例" ref="name" prop="shareHolderCashProfit">-->
<!--          <a-input-->
<!--            style="width: 200px"-->
<!--            type="number"-->
<!--            class="input-class"-->
<!--            v-model="settingForm.shareHolderCashProfit"-->
<!--            addonAfter="%"-->
<!--          />-->
<!--          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">说明：默认比例为0%</span>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="提现方式" ref="name" prop="cash_type">-->
<!--          <a-row :gutter="[16, 30]" type="flex" align="top">-->
<!--            <a-col :span="16">-->
<!--              <a-checkbox :checked="wechat_checked" @change="onCashChange(0, $event)"> 微信支付 </a-checkbox>-->
<!--              <a-checkbox :checked="alipay_checked" @change="onCashChange(1, $event)"> 支付宝支付 </a-checkbox>-->
<!--              <a-checkbox :checked="bank_checked" @change="onCashChange(2, $event)"> 银行卡支付 </a-checkbox>-->
<!--              &lt;!&ndash; <a-checkbox :checked="remaining_checked" @change="onCashChange(3, $event)"> 余额支付 </a-checkbox> &ndash;&gt;-->
<!--              <p style="margin: 8px 0 0 0">-->
<!--                <span-->
<!--                  style="-->
<!--                    font-size: 14px;-->
<!--                    font-family: PingFangSC-Regular;-->
<!--                    line-height: 22px;-->
<!--                    color: rgba(0, 0, 0, 0.45);-->
<!--                  "-->
<!--                  >微信自动支付，需要申请微信支付的企业付款到零钱功能</span-->
<!--                >-->
<!--              </p>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="最少提现" ref="name" prop="min_money">-->
<!--          <a-input-->
<!--            style="width: 200px"-->
<!--            type="number"-->
<!--            class="input-class"-->
<!--            v-model="settingForm.min_money"-->
<!--            addonAfter="元"-->
<!--          />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="每日上限" ref="name" prop="cash_max_day">-->
<!--          <a-input-->
<!--            style="width: 200px"-->
<!--            type="number"-->
<!--            class="input-class"-->
<!--            v-model="settingForm.cash_max_day"-->
<!--            addonAfter="元"-->
<!--          />-->
<!--          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block">0元表示不限制每日提现金额</span>-->
<!--        </a-form-model-item>-->

<!--        <div class="title">奖金设置</div>-->
<!--        <a-form-model-item label="佣金设置" prop="cover_url">-->
<!--          <a-checkbox-group v-model="methods" prop="methods">-->
<!--            <a-checkbox value="1"> 股东分红 </a-checkbox>-->
<!--            <a-checkbox value="2"> 极差分红 </a-checkbox>-->
<!--            <a-checkbox value="3"> 区域分红 </a-checkbox>-->
<!--          </a-checkbox-group>-->
<!--          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block"-->
<!--            >说明：开启了对应的佣金类型，下单才会计算对应类型的佣金。</span-->
<!--          >-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="团队层数" prop="team_num">-->
<!--          <a-input-number v-model="settingForm.team_num" />-->
<!--          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45); display: block"-->
<!--            >说明：前端团队查看，只能查看到后台设置的团队层数。</span-->
<!--          >-->
<!--        </a-form-model-item>-->
<!--        <div class="title">前端名称自定义</div>-->
<!--        <a-form-model-item label="极差分红" prop="range_name">-->
<!--          <a-input style="width: 200px" v-model="settingForm.range_name"></a-input>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="股东分红" prop="holder_name">-->
<!--          <a-input style="width: 200px" v-model="settingForm.holder_name"></a-input>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="区域分红" prop="area_name">-->
<!--          <a-input style="width: 200px" v-model="settingForm.area_name"></a-input>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="直推团队收益" prop="direct_range_name">-->
<!--          <a-input style="width: 200px" v-model="settingForm.direct_range_name"></a-input>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="极差分红(原关系)" prop="old_range_name">-->
<!--          <a-input style="width: 200px" v-model="settingForm.old_range_name"></a-input>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="直推团队收益(原关系)" prop="old_add_holder_name">-->
<!--          <a-input style="width: 200px" v-model="settingForm.old_add_holder_name"></a-input>-->
<!--        </a-form-model-item>-->

<!--        <div class="title">分红二维码</div>-->
<!--        <div class="codeBox">-->
<!--          <div-->
<!--            class="codePreview"-->
<!--            :style="{ backgroundImage: 'url(' + qrcode.backgroundImage + ')', color: qrcode.color }"-->
<!--          >-->
<!--            <div class="userBox" :style="{ backgroundColor: qrcode.backgroundColor }">-->
<!--              <div class="userPic"></div>-->
<!--              <span class="name">我是某某某</span>-->
<!--              <span class="tip">代言真的有钱赚！</span>-->
<!--              <div class="codePic">-->
<!--                <div class="tips">-->
<!--                  <span>扫描二维码</span>-->
<!--                  <span>和我一起赚钱</span>-->
<!--                </div>-->
<!--                <div class="pic">-->
<!--                  <span></span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="btns">-->
<!--              <div class="btn">-->
<!--                <span><a-icon type="edit" /></span>-->
<!--                <span>分享给好友</span>-->
<!--              </div>-->
<!--              <div class="btn">-->
<!--                <span><a-icon type="download" /></span>-->
<!--                <span>保存</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="codeSetting">-->
<!--            <div class="settingItem">-->
<!--              <span class="label">背景图片</span>-->
<!--              <cyyUploadImg-->
<!--                @uploadSuccess="successCb"-->
<!--                @deleteImg="deleteCb"-->
<!--                imgSizeText="375*667"-->
<!--                :imgSrc="qrcode.backgroundImage"-->
<!--              ></cyyUploadImg>-->
<!--            </div>-->
<!--            <div class="settingItem">-->
<!--              <soan class="label">背景颜色</soan>-->
<!--              <a-input type="color" v-model="qrcode.backgroundColor" style="width: 150px" />-->
<!--            </div>-->
<!--            <div class="settingItem">-->
<!--              <soan class="label">字体颜色</soan>-->
<!--              <a-input type="color" v-model="qrcode.color" style="width: 150px" />-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div style="text-align: center; margin-top: 20px">
          <a-button type="primary" @click="onSubmit"> 保存 </a-button>
          <a-button style="margin-left: 10px" type="primary" @click="pop = true"> 清空数据 </a-button>
        </div>
      </a-form-model>
    </a-card>

    <a-modal v-model="pop" @ok="clear" @cancel="pop = false">
      <a-form-model :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-form-model-item
          label="安全码"
          required
          help="会员、订单、分销数据、推荐关系，请谨慎操作，操作后将数据不能恢复。"
        >
          <a-input placeholder="请输入安全码" v-model="safe_code"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { settingInfo, setting, delShareHolderTestInfo } from '@/api/shareholder'
import { cyyUploadImg } from '@/components/CyyUi/index'
export default {
  components: {
    cyyUploadImg,
  },
  data() {
    return {
      // wechat_checked: false,
      // alipay_checked: false,
      bank_checked: false,
      settingForm: {
        // 奖金池周期
        // cycle: '',
        // 是否开启股东分红
        is_open_share: '',
        // 是否开启极差分红
        is_open_range: '',
        // 是否开启区域分红
        // is_open_area: 0,
        // 团队层数
        // team_num: '',
        // 极差分红名称
        // range_name: '',
        // 股东分红名称
        // holder_name: '',
        // 区域分红名称
        // area_name: '',

        shareHolderProfit: 0.0,
        shareHolderPriceMin: 0,
        //佣金提现比例
        // shareHolderCashProfit: 0.0,
        // min_money: 0,
        // cash_max_day: 0,
        // pay_wechat: 0,
        // pay_alipay: 0,
        // bank: 0,
        shareHolderLevel: 0,
        shareHolderNumber: [0, 0],
        shareHolderProfitSwitch: 0,
        shareHolderHighProfit: 0
        // shareHolderHasCheck: false,
        // old_range_name: '',
        // direct_range_name: '',
        // old_add_holder_name: '',
      },
      // 表单验证规则
      rules: {
        // team_num: [{ required: true, message: '请输入团队层数', trigger: 'blur' }],
        // range_name: [{ required: true, message: '请输入极差分红名称', trigger: 'blur' }],
        // holder_name: [{ required: true, message: '请输入股东分红名称', trigger: 'blur' }],
        // area_name: [{ required: true, message: '请输入区域分红名称', trigger: 'blur' }],
        // old_range_name: [{ required: true, message: '请输入极差分红(原关系)名称', trigger: 'blur' }],
        // direct_range_name: [{ required: true, message: '请输入直推团队收益名称', trigger: 'blur' }],
        // old_add_holder_name: [{ required: true, message: '请输入直推团队收益比例(原关系)名称', trigger: 'blur' }],
      },
      // 二维码相关
      // qrcode: {
      //   backgroundImage: '',
      //   backgroundColor: '',
      //   color: '#fff',
      // },
      // 佣金方式
      // methods: [],
      shareHolderLevel: [],

      pop: false,
      safe_code: '',
    }
  },
  computed: {
    // switchFilter:{
    //   get() {
    //     return Boolean(this.settingForm.shareHolderProfitSwitch) || false
    //   },
    //   set(val) {
    //     this.settingForm.shareHolderProfitSwitch = Number(val)
    //   }
    // },
    time() {
      if (
        this.outletForm.start_time &&
        this.outletForm.start_time != '' &&
        this.outletForm.end_time &&
        this.outletForm.end_time != ''
      ) {
        let date = this.$moment().format('YYYY-MM-DD')
        let start = new Date(date + ' ' + this.outletForm.start_time).getTime()
        let end = new Date(date + ' ' + this.outletForm.end_time).getTime()
        if (start < end) {
          return '今日'
        } else {
          return '明日'
        }
      }
    },
  },

  watch: {
    pop(e) {
      if (!e) this.safe_code = ''
    },
  },
  created() {
    this.getDetail()
  },
  methods: {
    // profitSwitchChange(e) {
    //   // this.switchFilter = e
    // },
    // 查询表单详情
    okPic(e) {
      console.log(e)
      this.outletForm.cover_url = e
    },
    // 根据id获取门店详情
    getDetail() {
      const hide = this.$message.loading('加载中', 0)
      settingInfo()
        .then((res) => {
          if (res.code == 0) {
            console.log(res)
            this.shareHolderLevel = res.data.shareHolderLevel
            // this.settingForm.holder_name = res.data.setting.holder_name
            // this.settingForm.range_name = res.data.setting.range_name
            // this.settingForm.area_name = res.data.setting.area_name
            // this.settingForm.old_range_name = res.data.setting.old_range_name
            // this.settingForm.direct_range_name = res.data.setting.direct_range_name
            // this.settingForm.old_add_holder_name = res.data.setting.old_add_holder_name
            // this.settingForm.team_num = res.data.setting.team_num ? res.data.setting.team_num : null
            this.settingForm.shareHolderProfit = res.data.setting.shareHolderProfit
            this.settingForm.shareHolderPriceMin = res.data.setting.shareHolderPriceMin
            // this.settingForm.shareHolderCashProfit = res.data.setting.shareHolderCashProfit
            this.settingForm.shareHolderLevel = res.data.setting.shareHolderLevel
            this.settingForm.shareHolderNumber = res.data.setting.shareHolderNumber
            this.settingForm.shareHolderProfitSwitch = parseInt(res.data.setting.shareHolderProfitSwitch)
            this.settingForm.shareHolderHighProfit = res.data.setting.shareHolderHighProfit
            // this.settingForm.shareHolderHasCheck = res.data.setting.shareHolderHasCheck === '1'
            // this.settingForm.pay_wechat = res.data.setting.pay_wechat
            // this.settingForm.pay_alipay = res.data.setting.pay_alipay
            // this.settingForm.bank = res.data.setting.bank
            // this.settingForm.cash_max_day = res.data.setting.cash_max_day
            // this.settingForm.min_money = res.data.setting.min_money
            // this.settingForm.is_open_area = parseInt(res.data.setting.is_open_area)
            // if (res.data.setting.is_open_range == 1) {
            //   this.methods.push('2')
            // }
            // if (res.data.setting.is_open_share == 1) {
            //   this.methods.push('1')
            // }
            // if (res.data.setting.is_open_area == 1) {
            //  this.methods.push('3')
            // }
            // if (res.data.setting.qrcode && res.data.setting.qrcode != '') {
            //   this.qrcode = JSON.parse(res.data.setting.qrcode)
            // }
            // if (this.settingForm.pay_wechat == 1) {
            //   this.wechat_checked = true
            // }
            // if (this.settingForm.pay_alipay == 1) {
            //   this.alipay_checked = true
            // }
            // if (this.settingForm.bank == 1) {
            //   this.bank_checked = true
            // }
          }
          hide()
        })
        .catch((err) => {
          hide()
        })
    },
    // successCb(e) {
    //   this.qrcode.backgroundImage = e.data
    // },
    // deleteCb(e) {
    //   this.qrcode.backgroundImage = ''
    // },
    // onCashChange(type, e) {
    //   console.log(e)
    //   if (type === 0) {
    //     if (e.target.checked === true) {
    //       this.wechat_checked = true
    //       this.settingForm.pay_wechat = 1
    //     } else {
    //       this.wechat_checked = false
    //       this.settingForm.pay_wechat = 0
    //     }
    //   }
    //   if (type === 1) {
    //     if (e.target.checked === true) {
    //       this.alipay_checked = true
    //       this.settingForm.pay_alipay = 1
    //     } else {
    //       this.alipay_checked = false
    //       this.settingForm.pay_alipay = 0
    //     }
    //   }
    //   if (type === 2) {
    //     if (e.target.checked === true) {
    //       this.bank_checked = true
    //       this.settingForm.bank = 1
    //     } else {
    //       this.bank_checked = false
    //       this.settingForm.bank = 0
    //     }
    //   }
    //   if (type === 3) {
    //     if (e.target.checked === true) {
    //       this.remaining_checked = true
    //       this.settingForm.remaining_sum = 1
    //     } else {
    //       this.remaining_checked = false
    //       this.settingForm.remaining_sum = 0
    //     }
    //   }
    // },
    // 点击提交表单
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let param = {
            // holder_name: this.settingForm.holder_name,
            // range_name: this.settingForm.range_name,
            // team_num: this.settingForm.team_num,
            // area_name: this.settingForm.area_name,
            // old_range_name: this.settingForm.old_range_name,
            // direct_range_name: this.settingForm.direct_range_name,
            // old_add_holder_name: this.settingForm.old_add_holder_name,
            shareHolderProfit: this.settingForm.shareHolderProfit, //出局股东冻结佣金比例
            shareHolderPriceMin: this.settingForm.shareHolderPriceMin, //递归分红停止基数
            // shareHolderCashProfit: this.settingForm.shareHolderCashProfit,
            // pay_wechat: this.settingForm.pay_wechat,
            // pay_alipay: this.settingForm.pay_alipay,
            // bank: this.settingForm.bank,
            // cash_max_day: this.settingForm.cash_max_day,
            // min_money: this.settingForm.min_money,
            shareHolderLevel: this.settingForm.shareHolderLevel, //冻结股东佣金（等级）
            shareHolderNumber: this.settingForm.shareHolderNumber.toString(), //冻结团队范围（层数）
            shareHolderProfitSwitch: parseInt(this.settingForm.shareHolderProfitSwitch),
            shareHolderHighProfit: this.settingForm.shareHolderHighProfit
            // shareHolderHasCheck: this.settingForm.shareHolderHasCheck ? 1 : 0,
          }
          // if (this.methods.includes('1')) {
          //   param.is_open_share = '1'
          // } else {
          //   param.is_open_share = '0'
          // }
          // if (this.methods.includes('2')) {
          //   param.is_open_range = '1'
          // } else {
          //   param.is_open_range = '0'
          // }

          // param.qrcode = JSON.stringify(this.qrcode)
          this.submit(param)
        } else {
          return false
        }
      })
    },
    // 提交设置
    async submit(param) {
      console.log(param)
      const res = await setting(param)
      if (res.code == 0) {
        this.$message.success('保存成功')
        this.getDetail()
      }
    },

    async clear() {
      // delShareHolderTestInfo
      let { safe_code } = this
      if (!safe_code) return this.$message.error('安全码不能为空')

      const res = await delShareHolderTestInfo({ safe_code })
      if (!res.code) {
        this.pop = false
        this.$message.success(res.msg)
        return
      }

      this.$message.error(res.msg)
    },
  },
}
</script>

<style lang="less" scoped>
.delivery {
  padding-top: 5px;
  p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 8px;
  }
}
.loadImg {
  padding: 8px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  .anticon {
    font-size: 30px;
    color: rgba(0, 0, 0, 0.45);
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.codeBox {
  margin-top: 20px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.codePreview {
  color: #fff;
  width: 375px;
  height: 667px;
  background-color: #f83d16;
  background-size: 100% 100%;
  background-position: 100% 100%;
  .userBox {
    display: flex;
    flex-direction: column;
    padding: 27px;
    width: 321px;
    height: 349px;
    border-radius: 24px;
    background-color: #f96932;
    margin: 71px auto 0 auto;
    .userPic {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background-color: #fff;
    }
    .name {
      font-size: 23px;
      margin-top: 27px;
    }
    .tip {
      margin-top: 6px;
      font-size: 14px;
      opacity: 0.6;
      padding-bottom: 25px;
      border-bottom: 1px solid #fff;
    }
    .codePic {
      padding-top: 25px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .tips {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        opacity: 0.6;
      }
      .pic {
        width: 80px;
        height: 80px;
        background-color: #fff;
        border-radius: 10px;
        padding: 7px;
        span {
          display: block;
          width: 100%;
          height: 100%;
          background-color: #e4e4e4;
        }
      }
    }
  }
  .btns {
    display: flex;
    justify-content: space-between;
    padding: 0 53px;
    margin-top: 33px;
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      span:nth-child(1) {
        width: 65px;
        height: 65px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      span:nth-child(2) {
        font-size: 13px;
        margin-top: 5px;
      }
    }
  }
}
.codeSetting {
  flex: auto;
  margin-left: 100px;
}
.settingItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .label {
    margin-right: 20px;
  }
}
</style>
